<template>
  <div>
    <div class="list">
        <button class="el-button el-button--primary" type="button" data-v-7153dac0=""><!--v-if--><!--v-if--><span>excel 导入</span></button>
        <button class="el-button el-button--success" type="button" data-v-7153dac0=""><!--v-if--><!--v-if--><span>excel 导出</span></button>
    </div>
    <div class="item">
      <el-card>
        <el-table :data="tableData" border style="width: 100%" center>
          <el-table-column type="index" label="#" width="80"></el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            label="联系方式"
            width="180"
          ></el-table-column>
          <el-table-column prop="avatar" label="头像" width="180">
            <template v-slot="{ row }">
              <el-image
                class="avatar"
                :src="row.avatar"
                :preview-src-list="[row.avatar]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="role" label="角色" width="180">
            <template #default="{ row }">
              <div v-if="row.role && row.role.length > 0">
                <el-tag v-for="item in row.role" :key="item.id">{{
                  item.title
                }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="openTime"
            label="开通时间"
            width="180"
          ></el-table-column>
          <el-table-column label="操作" width="230">
            <button
              class="el-button el-button--primary el-button--mini"
              type="button"
              data-v-7153dac0=""
            >
              <!--v-if--><!--v-if--><span>查看</span>
            </button>
            <button
              class="el-button el-button--info el-button--mini"
              type="button"
              data-v-7153dac0=""
            >
              <!--v-if--><!--v-if--><span>角色</span>
            </button>
            <button
              class="el-button el-button--danger el-button--mini"
              type="button"
              data-v-7153dac0=""
            >
              <!--v-if--><!--v-if--><span>删除</span>
            </button>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="page"
          :page-size="size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getdataList } from "@/api/users";
//分页
const total = ref(0);
const page = ref(1);
const size = ref(5);

const handleSizeChange = (val) => {
  size.value = val;
  listget();
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  page.value = val;
  listget();
};

// 获取数据
const tableData = ref([]);
const listget = async () => {
  const res = await getdataList({
    page: page.value,
    size: size.value,
  });
  tableData.value = res.data.list;
  total.value = res.data.total;
  console.log(res);
};
listget();
</script>

<style lang="scss" scoped>
::v-deep .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.list {
  width: 100%;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
}
.item {
  width: 100%;
  margin-top:20px ;
}
</style>